

<template>
  <view class="Mall4j binding-page">
    <view class="form_css">
      <uni-forms ref="registerForm1" :modelValue="registerData" :rules="registerRules">
        <uni-forms-item label="手机号" name="mobile" required>
          <input type="text" maxlength="11" style="position:  relative;     top: 16rpx;" :value="mobile" @input="onPhoneInput" placeholder="手机号" />
        </uni-forms-item>
        <uni-forms-item class="input-items" label="验证码" name="validCode" required>
          <input style="position: relative;     top: 16rpx; width: 100rpx;" type="text" :value="code" @input="onCodeInput" placeholder="验证码" />
          <view class="codeBtn1" v-if="show" @tap="getCode">获取验证码</view>
          <view class="codeBtn1" v-else>{{count}}s</view>
        </uni-forms-item>
      </uni-forms>
      <view class="btn-box">
        <text v-if="!infoComplete" class="sure-btn gray">{{ i18n.bind }}</text>
        <text v-else class="sure-btn" @tap="bindMobile">{{ i18n.bind }}</text>
      </view>
    </view>

    <!-- <view class="binding-phone">
      <view class="item">
        <text class="item-tip">{{ i18n.mobilePhone }}：</text>
        <input :placeholder="i18n.enterMobileNumber" type="number" maxlength="11" :value="mobile" @input="onPhoneInput"></input>
      </view>
      <view class="item">
        <text class="item-tip">{{ i18n.verificationCode }}：</text>
        <input :placeholder="i18n.enterCode" type="number" :value="code" @input="onCodeInput"></input>
        <text v-if="show" class="get-code gray" @tap="getCode">{{ i18n.getCode }}</text>
        <text v-if="!show" class="get-code gray">{{ count }} s</text>
      </view>
    </view> -->

  </view>
</template>

<script>
// pages/binding-phone/binding-phone.js
var http = require('../../utils/http.js')
var util = require('../../utils/util.js')

export default {

  components: {},
  props: {},
  data () {
    return {

      mobile: '',
      code: '',
      infoComplete: false,
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,
      showPage: false
    }
  },
  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
     * 生命周期函数--监听页面加载
     */
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.i18n.bindingMobilePhone
    })
  },

  /**
     * 生命周期函数--监听页面初次渲染完成
     */
  onReady: function () { },

  /**
     * 生命周期函数--监听页面显示
     */
  onShow: function () {

  },

  /**
     * 生命周期函数--监听页面隐藏
     */
  onHide: function () {

  },

  /**
     * 生命周期函数--监听页面卸载
     */
  onUnload: function () { },

  /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
  onPullDownRefresh: function () { },

  /**
     * 页面上拉触底事件的处理函数
     */
  onReachBottom: function () { },

  /**
     * 用户点击右上角分享
     */
  onShareAppMessage: function () { },
  methods: {
    /**
       * 获取验证码
       */
    getCode () {
      if (!util.checkPhoneNumber(this.mobile)) {
        uni.showToast({
          title: this.i18n.enterMobileNumberTips,
          icon: 'none'
        })
        return
      }
      if (this.hadGotCode) {
        return
      }
      this.hadGotCode = true
      var params = {
        url: '/user/sendBindSms',
        method: 'PUT',
        data: {
          mobile: this.mobile
        },
        callBack: res => {
          this.hadGotCode = true
          const timeCount = 60
          if (!this.timer) {
            this.count = timeCount
            this.show = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= timeCount) {
                this.count--
              } else {
                clearInterval(this.timer)
                this.timer = null
                this.show = true
                this.hadGotCode = false
              }
            }, 1000)
          }
        }
      }
      http.request(params)
    },

    onPhoneInput: function (e) {
      this.setData({
        mobile: e.detail.value
      })
    },
    onCodeInput: function (e) {
      this.setData({
        code: e.detail.value
      })
      if (this.$data.mobile && this.$data.code) {
        this.setData({
          infoComplete: true
        })
      } else {
        this.setData({
          infoComplete: false
        })
      }
    },
    /**
       * 绑定手机号
       */
    bindMobile () {
      var params = {
        url: '/social/bind',
        method: 'POST',
        data: {
          validAccount: this.mobile,
          validCode: this.code,
          tempUid: uni.getStorageSync('tempUidB2c')
        },
        callBack: res => {
          uni.removeStorageSync('tempUidB2c')
          util.loginSuccess(res)
        }
      }
      http.request(params)
    }
  }
}
</script>
<style  scoped lang="scss">
@import "./binding-phone.css";
.form_css {
  background-color: #fff;
  padding: 35rpx;
}
.codeBtn1 {
  position: absolute;
  right: 30rpx;
  top: -7rpx;
  color: #ff6d13;
  line-height: 90.7rpx;
  font-size: 27.91rpx;
  z-index: 2;
}
.btn-box {
  padding: 0 20rpx;
  margin-top: 60rpx;
  .sure-btn {
    display: block;
    font-size: 32rpx;
    color: #fff;
    background: #ff6d13;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 50rpx;
  }
  .sure-btn.gray {
    background: #e1e1e1;
    margin-bottom: 30rpx;
  }
}
::v-deep .uni-forms-item__content {
  height: 90.7rpx;
  background-color: #f9f9f9;
  border-radius: 22.67rpx;
  padding-left: 26.16rpx;
  width: 90%;
  color: #111111;
  font-size: 27.91rpx;
  line-height: 90.7rpx;
}
</style>
